<script setup>
import { getShouC, getZhifuXinxi } from "@/http/api";
import { reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const { id, type, type_price, activities } = route.query;
console.log(id);
console.log(type);
console.log(type_price);
console.log(activities);
const data = reactive({
  info: {},
  shopinfo: {},
});
onMounted(() => {
  info();
  getZhifu();
});
const info = async () => {
  const id = localStorage.getItem("id");
  const res = await getShouC(id);
  data.info = res;
  console.log("用户信息：：：：：：：：", res);
};
const getZhifu = async () => {
  let obj = {
    shop_id: id * 1,
    type: type * 1,
    spell_id: null,
    group_id: null,
    advance_id: null,

    pay_type: null,
  };
  const res = await getZhifuXinxi(obj);
  console.log(res);
  data.shopinfo = res.info;
};
</script>
<template>
  <div class="mai">
    <header>
      <van-icon name="arrow-left" @click="$router.back()" />
      <h3>确认订单</h3>
    </header>
    <div class="box">
      <van-icon name="arrow" />
      <p>
        <span>{{ data.info.user_nickname }}</span
        ><span class="sp">{{ data.info.tel }}</span>
      </p>
      <div class="div1">
        <span>收货地址</span
        ><span class="sp1">{{ data.info.province_name }}</span>
        <span>{{ data.info.city_name }}</span>
        <span>{{ data.info.area_name }}</span>
      </div>
      <ul>
        <li>
          <img :src="data.shopinfo.image" alt="" />
          <div class="div2">
            <p class="p1">{{ data.shopinfo.title }}</p>
            <p class="p2">￥{{ data.shopinfo.price }}</p>
          </div>
        </li>
      </ul>
      <div class="lei">
        <p>类型</p>
        <p>课程</p>
      </div>
      <div class="shu">
        <p>数量</p>
        <p>x1</p>
      </div>
      <div class="shang">
        <p>商品价格</p>
        <p>￥{{ data.shopinfo.price }}</p>
      </div>
      <div class="you">
        <p>优惠券</p>
        <p class="p1">暂无可用</p>
      </div>
    </div>
    <footer>
      <p class="p1">
        实付金额：<span>￥{{ data.shopinfo.price }}</span>
      </p>
      <p class="p2">提交订单</p>
    </footer>
  </div>
</template>
<style lang="scss" scoped>
.mai {
  width: 100%;
  height: 100%;
  header {
    height: 88px;
    line-height: 88px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .van-icon {
      width: 60px;
      height: 60px;
      text-align: center;
    }
    h3 {
      flex: 1;
      text-align: center;
      font-size: 32px;
    }
  }
  .box {
    padding: 0 20px;
    font-size: 26px;
    position: relative;
    .van-icon {
      position: absolute;
      right: 20px;
      top: 10px;
      font-size: 42px;
    }
    .sp {
      margin-left: 40px;
    }
    .sp1 {
      margin-left: 40px;
      color: #666;
    }
    ul {
      width: 100%;
      overflow: hidden;
      margin-top: 60px;
      li {
        display: flex;
        img {
          width: 45%;
        }
      }
      .div2 {
        margin-left: 20px;
        flex: 1;
        .p1 {
          font-size: 36px;
          white-space: nowrap; /* 规定⽂本是否折⾏ */
          overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
          text-overflow: ellipsis;
          margin: 0;
        }
        .p2 {
          color: #f00;
          font-size: 36px;
          margin-top: 60px;
        }
      }
    }
    .lei {
      display: flex;
      padding: 10px 0;
      font-size: 32px;
      justify-content: space-between;
      color: #666;
    }
    .shu {
      display: flex;
      padding: 10px 0;
      font-size: 32px;
      justify-content: space-between;
      color: #666;
    }
    .shang {
      display: flex;
      padding: 10px 0;
      font-size: 32px;
      justify-content: space-between;
      color: #666;
    }
    .you {
      display: flex;
      padding: 10px 0;
      font-size: 32px;
      justify-content: space-between;
      color: #666;
      .p1 {
        color: red;
        font-size: 28px;
      }
    }
  }
  footer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    height: 110px;
    line-height: 110px;
    font-size: 32px;
    align-items: center;
    justify-content: space-between;
    .p1 {
      width: 60%;
      height: 110px;
      background: #fff;
      line-height: 110px;
      margin-left: 30px;
      color: #f00;
    }
    .p2 {
      width: 40%;
      height: 110px;
      text-align: center;
      background: orangered;
      color: #fff;
      font-size: 26px;
      //   line-height: 88px;
    }
  }
}
</style>
